<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
        <title>Student Dashboard</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                padding: 20px;
                line-height: 1.6;
            }
            .container {
                max-width: 800px;
                margin: auto;
                overflow: hidden;
                padding: 0 20px;
            }
            .header, .footer {
                text-align: center;
                padding: 10px 0;
            }
            .student-info {
                background: #f9f9f9;
                padding: 15px;
                margin-bottom: 15px;
                border-radius: 5px;
            }
            .button {
                margin: 5px;
                padding: 5px 15px;
                text-decoration: none;
                border: none;
                border-radius: 5px;
                background-color: #007bff;
                color: white;
                cursor: pointer;
            }
            .logout-button {
                background-color: #dc3545;
            }
            .scrollable-table {
                max-height: 300px;
                overflow-y: auto;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 20px;
            }
            th, td {
                text-align: left;
                padding: 12px;
                border: 1px solid #ddd;
            }
            tr:nth-child(even) {
                background-color: #f2f2f2;
            }
            .total-credits {
                font-weight: bold;
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h2>你好, ${student.name} 同学</h2>
            </div>
            <div class="student-info">
                学号: ${student.id} <br>
                姓名: ${student.name} <br>
                性别: ${student.gender} <br>
                班级: ${student.class_id} <br>
                年龄: ${student.age} <br>
            </div>
            <div class="button-container text-center">
                <button onclick="location.href='changeStudentPassword.jsp'" class="button">修改密码</button>
                <button onclick="location.href='enterCourseSelection'" class="button">进入选课</button>
                <button onclick="location.href='login.html'" class="button logout-button">注销</button>
            </div>
            <div class="scrollable-table">
                <table>
                    <thead>
                    <tr>
                        <th>课程号</th>
                        <th>学期</th>
                        <th>成绩</th>
                        <th>教师号</th>
                        <th>学分</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${grades}" var="grade">
                        <tr>
                            <td>${grade.course_id}</td>
                            <td>${grade.term}</td>
                            <td>${grade.grade}</td>
                            <td>${grade.teacher_id}</td>
                            <td>${grade.credits}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="footer">
                <div class="total-credits">
                    总学分:
                    <span id="totalCreditsValue">
                        <c:set var="totalCredits" value="0" />
                        <c:forEach items="${grades}" var="grade">
                            <c:set var="totalCredits" value="${totalCredits + grade.credits}" />
                        </c:forEach>
                        ${totalCredits}
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>